1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { GetServerSideProps } from "next";
import "../../app/globals.css";
import TitleBar from "../../components/TitleBar/TitleBar";
import { ChannelCard } from "@/components/channel-card";
import DataChart from "@/components/DataChart/DataChart";
import Footer from "@/components/Footer/Footer";
import Head from 'next/head'
interface ChannelDataProp {
channel_name: string;
profile_pic: string;
subscribers: number;
sub_org: string;
video_count: number;
next_milestone: string;
days_until_next_milestone: string;
next_milestone_date: string;
}
interface GraphDataProp{
labels: string[];
datasets: number[];
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const { slug } = context.params || {};
const chartData = await getGraphData(slug as string);
const channelData = await getChannelData(slug as string);
const sevenDayGraphData = await get7DGraphData(slug as string);
return {
props: {
chartData,
channelData,
slug,
sevenDayGraphData
},
};
};
function Page({ chartData, channelData, sevenDayGraphData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, sevenDayGraphData: GraphDataProp, slug: string }) {
return (
<>
<Head>
<title>{slug as string} - PhaseTracker</title>
<meta property="og:title" content={`${slug as string} - PhaseTracker`}/>
<meta name="description" content={`${channelData.sub_org} - ${channelData.subscribers}`} />
<meta name="og:description" content={`${channelData.sub_org} - ${channelData.subscribers}`} />
<meta property="og:image" content={`${channelData.profile_pic}`}/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta name="author" content="Pinapelz"></meta>
</Head>
<TitleBar title={slug as string} redirectUrl="/" showHomeButton backgroundColor="black" />
<div className="flex justify-center">
<div className="flex flex-col items-center">
<ChannelCard
name={channelData.channel_name}
avatarUrl={channelData.profile_pic}
subscriberCount={channelData.subscribers}
videoCount={channelData.video_count}
suborg={channelData.sub_org}
nextMilestone={channelData.next_milestone}
nextMilestoneDays={channelData.days_until_next_milestone}
nextMilestoneDate={channelData.next_milestone_date}
/>
</div>
</div>
<div className="px-48 mb-10 mt-10">
<div className="mb-12">
<DataChart overrideBGColor="black" overrideBorderColor="black" chartData={chartData}/>
</div>
<div className="mb-12">
<DataChart chartData={sevenDayGraphData} overrideBGColor="black" overrideBorderColor="black" graphTitle="7 Day Historical"/>
</div>
</div>
<Footer />
</>
);
}
async function getGraphData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
async function getChannelData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/channel/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
async function get7DGraphData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}/7d`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
export default Page;
|
